:root{
    --bg:#0b1220; --panel:#111a2b; --muted:#93a1b1; --text:#e9eef5; --accent:#3b82f6; --good:#10b981; --danger:#ef4444;
    --radius:16px;
  }
  *{box-sizing:border-box}
  body{margin:0;background:linear-gradient(120deg,#071021,#0e1b33);color:var(--text);
       font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
  .wrap{max-width:1100px;margin:0 auto;padding:28px}
  h1{font-size:clamp(20px,3vw,28px);letter-spacing:0.02em;margin:0 0 16px}
  .row{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
  @media (max-width:900px){.row{grid-template-columns:1fr}}
  
  .card{background:var(--panel);border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06)}
  .card .inner{padding:16px}
  
  .search{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.05)}
  .search input{all:unset;flex:1;font-size:16px}
  
  .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
  @media (max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:640px){.grid{grid-template-columns:1fr}}
  
  .item{
    padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03)
  }
  .item h3{margin:0;font-size:18px}
  .item .price{opacity:.85}
  
  /* ▼ はみ出し対策：数量行を柔軟レイアウトにし、"小計" には固定幅＋右寄せを与える */
  .qty{
    display:flex; align-items:center; gap:10px; margin-top:10px;
    flex-wrap:wrap;             /* 折り返してはみ出し防止 */
  }
  .qty .subtotal{
    margin-left:auto;
    min-width:140px;            /* 小計エリアの幅を確保 */
    text-align:right;
    white-space:nowrap;         /* 数値を1行で見やすく */
    overflow:hidden; text-overflow:ellipsis;  /* 万一長くても省略 */
  }
  
  .btn{border:none;border-radius:12px;padding:8px 12px;background:rgba(255,255,255,.09);color:var(--text);cursor:pointer;transition:.15s}
  .btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.13)}
  .btn.icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:20px}
  
  .cart{margin-top:8px}
  table{width:100%;border-collapse:separate;border-spacing:0 8px}
  th{font-size:12px;color:var(--muted);text-align:left;font-weight:600}
  td,th{padding:8px 10px}
  tbody tr{background:rgba(255,255,255,.04);border-radius:10px}
  tbody td:first-child{border-radius:10px 0 0 10px}
  tbody td:last-child{border-radius:0 10px 10px 0;text-align:right}
  
  .totals{margin-top:12px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.03)}
  .totals .row2{display:flex;gap:10px;align-items:center}
  .totals input{flex:1;min-width:140px;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#0c1527;color:var(--text)}
  .totals .kv{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
  .money{font-weight:700}
  
  .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
  .primary{background:linear-gradient(135deg,var(--accent),#60a5fa)}
  .good{background:linear-gradient(135deg,var(--good),#34d399)}
  .danger{background:linear-gradient(135deg,var(--danger),#fb7185)}
  .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
  
  .hint{font-size:13px;color:#cbd5e1;margin-top:8px}
  .muted{color:var(--muted)}
  
  /* ▼ 履歴テーブル */
  .history-header{
    display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;
  }
  .history-actions{display:flex; gap:8px; flex-wrap:wrap}
  .history-table-wrap{
    width:100%; overflow:auto; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.03);
  }
  .history-table{width:100%; border-collapse:separate; border-spacing:0}
  .history-table thead th{
    position:sticky; top:0; background:rgba(17,26,43,.95); backdrop-filter:blur(4px);
  }
  .history-table th, .history-table td{ padding:10px; border-bottom:1px solid rgba(255,255,255,.06); }
  .history-table td:nth-child(2){ text-align:left }   /* 明細列は左寄せ */
  .history-table td:nth-child(n+3){ text-align:right }/* 金額系は右寄せ */